<template>
    <div class="form-group">
        <label>
            <span :class="labelClass">{{label}}</span>
            <switch-i v-model="data" :disabled="disabled" :off="off" :on="on" :required="required" :name="name"/>
        </label>
        <slot/>
    </div>
</template>

<script>
    import SwitchI from '../switch/Switch';

    export default {
        components: {SwitchI},
        name: 'input-switch',
        data () {
            return {
                data: this.value
            };
        },
        props: {
            label: {type: String},
            value: {type: Boolean},
            disabled: {type: Boolean},
            off: {type: String, default: 'OFF'},
            on: {type: String, default: 'ON'},
            name: {type: name},
            required: {type: Boolean},
            labelClass: {type: String}
        },
        watch: {
            value (newVal) {
                this.data = newVal;
            },
            data (newVal) {
                this.$emit('input', newVal);
            }
        }
    };
</script>

<style scoped>
    .form-group label {
        display: block;
    }
</style>
